<template>
  <div class="bookmarked-item row items-center">
    <div class="drag-area column justify-center items-center">
      <q-icon name="img:/icons/drag-vertical.svg" />
    </div>
    <div class="preview">
      <q-img class="image" :src="video.coverImage" @click="gotoVideo">
        <template v-slot:error>
          <div class="absolute-full flex flex-center bg-negative text-white">
            Cannot load image
          </div>
        </template>
      </q-img>
      <div class="duration-label q-px-xs">{{ video.durationLabel }}</div>
    </div>
    <div class="info column q-mx-md">
      <div class="title one-line-text">{{ video.title }}</div>
      <div class="video-details row items-center q-my-xs">
        <q-icon name="mdi-podium label"></q-icon>
        <div class="label">482</div>
        <q-icon class="q-ml-sm label" name="mdi-eye"></q-icon>
        <div class="q-mr-sm label">2K</div>
        <q-icon name="img:/icons/video-info-record.svg" />
        <div class="label">24</div>
      </div>
    </div>
    <div class="creator-info row">
      <q-avatar size="40px">
        <img :src="video.creatorAvatar" />
      </q-avatar>
      <div class="column">
        <div class="creator-name">{{ video.creatorName }}</div>
        <div class="row">
          <h-icon-num icon="mdi-star" label="0" />
          <q-chip class="chip" square size="10px" style="color: #00b5bc"
            >ORIGINAL</q-chip
          >
          <q-chip class="chip" square size="10px" style="color: #b7b7b7"
            >English</q-chip
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import Video from 'src/models/Video';
import { useRouter } from 'vue-router';
import HIconNum from 'components/utils/HIconNum.vue';
export default defineComponent({
  props: {
    video: {
      type: Video,
      required: true,
    },
  },
  components: { HIconNum },
  setup(props) {
    const router = useRouter();
    return {
      gotoVideo(langId = '') {
        if (props) {
          void router.push({
            name: 'Video',
            params: {
              id: props.video.id,
            },
          });
        }
      },
    };
  },
});
</script>
<style lang="sass" scoped>
.video-info
  max-width: 266px
  .video-title
    font-size: 14px
    font-weight: bold
  .video-description
    font-size: 12px
    color: $sub
.bookmarked-item
  width: 100%
  height: 80px
  background-color: $primary-panel
  .drag-area
    width: 55px
    height: 100%
  .preview
    width: 140px
    height: 100%
    position: relative
    .duration-label
      bottom: 4px
      right: 4px
      position: absolute
      font-size: 12px
      background-color: $primary-panel
      border-radius: 3px
      cursor: default
  .info
    width: 30%
    .title
      max-width: 200px
      font-size: 14px
      font-weight: bold
    .video-details
      cursor: default
      .label
        color: $sub
        font-size: 12px
</style>
